<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { QueryInfo, ExportFile, SaveInfo } from '@/api'
import dayjs from 'dayjs'
import { InfoFilled } from '@element-plus/icons-vue'
import EditModal from './EditModal.vue'
import Login from '../Login/Index.vue'

const props = defineProps(['lineValue', 'shield'])

const form = reactive({
  Type: '',
  date: [],
  Name: ''
})

const feederList = ref<any[]>([])
const columnList = ref<any[]>([])

const getData = () => {
  const temp = form.date
  const post = {
    InputStr: 'OperType=GetQueryData',
    JsonStr: [
      {
        Type: form.Type,
        Name: form.Name,
        StartDate: temp[0],
        EndDate: temp[1]
      }
    ]
  }
  QueryInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    const { ListInfo, FieldInfo } = res.data
    //格式化数据 取ListInfo中的value 取FieldInfo中的name
    feederList.value = ListInfo
    const temp = FieldInfo.map((item: any) => {
      return {
        Key: item.Key,
        Name: item.Name,
        Show: item.Show
      }
    })
    //只显示Show=true的列数据
    columnList.value = temp.filter((item: any) => item.Show == 'true')
  })
}

//类型下拉框
const typeList = ref<any[]>([])
const getTypeList = () => {
  const post = {
    InputStr: 'OperType=GetQueryType',
    JsonStr: []
  }
  QueryInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    typeList.value = res.data
  })
}
const changeType = () => {
  form.Name = ''
  nameList.value = []
  form.Type && getNameList()
}
//名称下拉框
const nameList = ref<any[]>([])
const getNameList = () => {
  const post = {
    InputStr: `OperType=GetQueryName;$;Type=${form.Type}`,
    JsonStr: []
  }
  QueryInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    nameList.value = res.data
  })
}

//导出
const download = () => {
  const current = dayjs(new Date()).format('YYYYMMDDHHmmss')
  const temp = form.date
  const post = {
    InputStr: 'OperType=ExportQueryData',
    JsonStr: [
      {
        Type: form.Type,
        Name: form.Name,
        StartDate: temp[0],
        EndDate: temp[1]
      }
    ]
  }
  ExportFile(post).then((response: any) => {
    // 处理Blob数据（后台已转换为Blob不需要再转了）
    // const blob = new Blob([response])
    const link = document.createElement('a')
    link.href = URL.createObjectURL(response)
    link.download = `${form.Type}_${current}.xls` // 设置下载的文件名
    // 将链接添加到DOM中，模拟点击事件以开始下载，然后移除链接元素以清理DOM。
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

const shieldStatus = ref(true)
const handleLock = () => {
  loginRef.value.open('UnLock')
}
const handleUnLock = () => {
  shieldStatus.value = true
}

const loginRef = ref()
const closeLogin = async (type: string) => {
  if (type.includes('UnLock')) {
    shieldStatus.value = false
  }
}

const editRef = ref()
const onEdit = (row: any) => {
  let submit: any = []
  const post = {
    InputStr: 'OperType=GetDetailInfo',
    JsonStr: [
      {
        Type: form.Type
      }
    ]
  }
  QueryInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    const result = res.data
    Object.keys(result).map((key: any) => {
      // console.log(`output->result[key]`, result[key])
      //如果Type=select 则需要创建List
      if (result[key][0]['Type'] == 'text') {
        submit.push({
          ...result[key][0],
          Key: key,
          Value: row[key]
        })
      } else {
        const List = result[key].map((item: any) => {
          return {
            Label: item.Label,
            Value: item.Value
          }
        })
        submit.push({
          ...result[key][0],
          Key: key,
          Value: row[key],
          List
        })
      }
    })
    editRef.value.open(submit)
  })
}
//删除
const onDel = (row: any) => {
  const post = {
    InputStr: `OperType=DelDetailInfo;$;Type=${form.Type}`,
    JsonStr: [row]
  }
  QueryInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success(res.msg)
    getData()
  })
}

onMounted(() => {
  getTypeList()
})
</script>

<template>
  <div class="search">
    <div class="my-box">
      <div class="shielding-box flex items-center">
        <!-- <div>
          <span v-if="shieldStatus" type="success">锁定</span>
          <span v-else type="warning">开启</span>
        </div> -->
        <button class="lock-button lock" v-if="shieldStatus" @click="handleLock"
          ><el-icon color="#67C23A" :size="24"><Lock /></el-icon></button
        >
        <button class="lock-button unlock" v-else @click="handleUnLock"
          ><el-icon color="#F56C6C" :size="24"><Unlock /></el-icon></button
        >
        <!-- <el-switch
          v-if="shieldStatus"
          v-model="lock"
          size="large"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          
        />
        <el-switch
          v-else
          v-model="unLock"
          size="large"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          
        /> -->
      </div>
      <el-form :inline="true" :model="form" class="my-form demo-form-inline" @submit.prevent>
        <el-form-item label="查询类型">
          <el-select
            v-model="form.Type"
            placeholder="请选择"
            filterable
            clearable
            style="width: 230px"
            @change="changeType"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.Label"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-select
            v-model="form.Name"
            placeholder="请选择"
            filterable
            clearable
            style="width: 230px"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="(item, index) in nameList"
              :key="index"
              :label="item.Label"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="-"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item>
          <button class="my-button button-search mr-6" @click="getData">查 询</button>
          <button class="my-button button-save" @click="download">导 出</button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="form" class="my-form demo-form-inline mt-2"> </el-form>
      <div class="table-box mt-6">
        <el-table :data="feederList" height="630" max-height="630" style="width: 100%">
          <el-table-column
            align="center"
            v-for="(item, index) in columnList"
            :key="index"
            :prop="item.Key"
            :label="item.Name"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column v-if="feederList.length" align="center" label="操作" width="120">
            <template #default="scope">
              <el-button type="success" link @click="onEdit(scope.row)">详情</el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定删除吗"
                @confirm="onDel(scope.row)"
              >
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="feederList.length && shieldStatus" class="operator-mask"></div>
      </div>
    </div>
  </div>
  <!-- 认证弹框 -->
  <Login ref="loginRef" @success="closeLogin" />
  <!-- 详情弹框 -->
  <EditModal ref="editRef" :type="form.Type" @refresh="getData" />
</template>
<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demo-form-inline .el-form-item {
  margin-bottom: 0;
}

:deep(.demo-form-inline .el-form-item__label) {
  font-size: inherit;
  color: inherit;
  margin-top: 4px;
}

:deep(.table-box .el-input__inner) {
  text-align: center;
}

.table-box {
  position: relative;
  width: 98%;
  margin: 0 auto;
  padding-bottom: 10px;
  :deep(.el-table) {
    font-size: 16px;
    background-color: #141c36;
  }
  :deep(.el-table .cell) {
    word-break: normal;
    white-space: nowrap;
  }

  :deep(.el-table__empty-block) {
    background-color: #141c36;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #143452;
    color: #79a0c9;
    font-weight: 600;
  }

  :deep(.el-table .el-table__cell) {
    background: #141c36;
    color: #799ac1;
    border-bottom: 0;
    padding: 0.5rem 0;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: #1f4465;
  }

  :deep(.el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    color: #799ac1;
    height: 2.6rem;
    color: #799ac1;
    font-size: 1.3rem;
  }

  :deep(.el-table) {
    --el-table-bg-color: none;
  }

  :deep(.el-table tbody .el-table__cell) {
    height: 20px;
    padding: 7px 0;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #799ac1;
  }
}

:deep(.my-form .el-input__wrapper) {
  background: #1c324f;
  box-shadow: none;
  height: 2.6rem;
}

:deep(.my-form .el-input__inner) {
  height: 2.6rem;
  color: #799ac1;
  font-size: 1.3rem;
}

.my-form {
  width: 98%;
  margin: 20px auto 0 auto;
  :deep(.el-date-editor .el-range-input) {
    font-size: 1.3rem;
  }
  :deep(.el-date-editor .el-range-separator) {
    color: inherit;
  }
  :deep(.el-date-editor .el-range__icon) {
    font-size: 20px;
  }
}
.table-box {
  :deep(.el-button--danger.is-plain.is-disabled) {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
    color: #fff;
  }
  :deep(.el-table__empty-text) {
    color: #79a0c9;
  }
}

:deep(.el-table .el-table__inner-wrapper::before) {
  display: none;
}
.search {
  .my-button {
    width: 68px;
    height: 37px;
    line-height: 35px;
    font-size: 16px;
  }
}

.shielding-box {
  position: absolute;
  right: 23px;
  top: 20px;
  .el-switch {
    transform: scale(1.4);
    margin-left: 14px;
  }
}

.operator-mask {
  position: absolute;
  width: 120px;
  height: 590px;
  right: 0;
  top: 38px;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.lock-button{
  width: 50px;
  height: 37px;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
  margin-top: 3px;
  margin-right: 33px;
}

.lock-button.lock{
  border: 1px solid #67C23A;
}

.lock-button.unlock{
  border: 1px solid #F56C6C;
}

</style>
